<!DOCTYPE html>
<html lang="zh-CN">
<head>
  {% block title %}<title>本地图书馆</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
  {% block extra_css %}{% endblock %}
  <style>
    .sidebar-nav {
      list-style: none;
      padding-left: 0;
    }
    .sidebar-nav li {
      margin: 8px 0;
    }
    .sidebar-nav a {
      text-decoration: none;
      color: #333;
      transition: color 0.3s;
    }
    .sidebar-nav a:hover {
      color: #007bff;
    }
    .nav-section {
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    .nav-section-title {
      font-weight: bold;
      color: #666;
      margin-bottom: 10px;
    }
    .pagination {
      margin-top: 20px;
    }
    .page-links {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .page-current {
      padding: 5px 10px;
      background: #f8f9fa;
      border-radius: 4px;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2">
      {% block sidebar %}
      <div class="nav-section">
        <div class="nav-section-title">导航</div>
        <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}"><i class="fas fa-home"></i> 首页</a></li>
          <li><a href="{% url 'books' %}"><i class="fas fa-book"></i> 全部图书</a></li>
          <li><a href="{% url 'popular-books' %}"><i class="fas fa-fire"></i> 热门图书</a></li>
          <li><a href="{% url 'authors' %}"><i class="fas fa-user-edit"></i> 作者列表</a></li>
          <li><a href="{% url 'genres' %}"><i class="fas fa-tags"></i> 图书分类</a></li>
          <li><a href="{% url 'languages' %}"><i class="fas fa-language"></i> 语言</a></li>
        </ul>
      </div>

      <div class="nav-section">
        <div class="nav-section-title">用户</div>
        <ul class="sidebar-nav">
        {% if user.is_authenticated %}
          <li><i class="fas fa-user"></i> {{ user.get_username }}</li>
          <li><a href="{% url 'my-borrowed' %}"><i class="fas fa-book-reader"></i> 我的借阅</a></li>
          <li><a href="{% url 'favorite-books' %}"><i class="fas fa-bookmark"></i> 我的收藏</a></li>
          <li>
            <form id="logout-form" method="post" action="{% url 'logout' %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-link"><i class="fas fa-sign-out-alt"></i> 退出登录</button>
            </form>
          </li>
        {% else %}
          <li><a href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-sign-in-alt"></i> 登录</a></li>
        {% endif %}
        </ul>
      </div>

      {% if user.is_staff %}
      <div class="nav-section">
        <div class="nav-section-title">管理员</div>
        <ul class="sidebar-nav">
          <li><a href="{% url 'all-borrowed' %}"><i class="fas fa-list"></i> 借阅记录</a></li>
          {% if perms.catalog.add_genre %}
            <li><a href="{% url 'genre-create' %}"><i class="fas fa-plus"></i> 添加分类</a></li>
          {% endif %}
          {% if perms.catalog.add_language %}
            <li><a href="{% url 'language-create' %}"><i class="fas fa-plus"></i> 添加语言</a></li>
          {% endif %}
          {% if perms.catalog.add_author %}
            <li><a href="{% url 'author-create' %}"><i class="fas fa-plus"></i> 添加作者</a></li>
          {% endif %}
          {% if perms.catalog.add_book %}
            <li><a href="{% url 'book-create' %}"><i class="fas fa-plus"></i> 添加图书</a></li>
          {% endif %}
          {% if perms.catalog.add_bookinstance %}
            <li><a href="{% url 'bookinstance-create' %}"><i class="fas fa-plus"></i> 添加副本</a></li>
          {% endif %}
        </ul>
      </div>
      {% endif %}
      {% endblock %}
    </div>
    <div class="col-sm-10">
      {% if messages %}
      <div class="messages">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
      </div>
      {% endif %}

      {% block content %}{% endblock %}

      {% block pagination %}
        {% if is_paginated %}
          <nav aria-label="分页导航">
            <ul class="pagination justify-content-center">
              {% if page_obj.has_previous %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                    <i class="fas fa-chevron-left"></i> 上一页
                  </a>
                </li>
              {% endif %}
              
              <li class="page-item disabled">
                <span class="page-link">第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
              </li>

              {% if page_obj.has_next %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                    下一页 <i class="fas fa-chevron-right"></i>
                  </a>
                </li>
              {% endif %}
            </ul>
          </nav>
        {% endif %}
      {% endblock %}
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
